<template>
    <div>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="问题描述：" >
                        <Input class="query-form-el"  type="text" v-model="form1.rpoblemDesc" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button   class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :height="tableHeight" class="table" no-data-text="没有查询到相关数据！" :loading="buttonLoading" size="small"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal title="问题查看" :transfer=false  v-model="model3" class="modal-view-detail"  :width=900 :styles="{top: '10px'}">
            <Form ref="viewForm" :label-width="100">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="审计任务：" >
                            {{showdata.planTaskName}}
                        </FormItem>
                    </Col>
                    <Col span="11" >
                        <FormItem label="审计单位：">
                            {{showdata.auditedOrgName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="审计专家：">
                             {{showdata.auditorName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="审计时间：" prop="auditTime">
                            {{this.formatDate(new Date(showdata.auditTime), 'yyyy-MM-dd')}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="项目：">
                            {{showdata.factorName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" >
                        <FormItem label="审计内容：" >
                            {{showdata.subitemName}}
                        </FormItem>
                    </Col>
                </Row>
                 <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="扣分：" prop="auditScore">
                            {{showdata.auditScore}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="问题状态:">
                            {{showdata.problemStateName}}
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" >
                        <FormItem label="问题描述：" prop="rpoblemDesc">
                            {{showdata.rpoblemDesc}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem label="问题图片:">
                            <div class="demo-upload-list" style="display:inline;margin:2px" v-for="item in upLoadList1" :key="item.id">
                                <img style="width:50px;height:50px;" @click="handleView(item.name,item.url)" :src="item.url">
                            </div>
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="detail-background-clor">
                    <Col span="11">
                        <FormItem label="整改实施人：" prop="executorId">
                            {{showdata.executorName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="整改期限（天）：" prop="rectDeadLine">
                            {{formatDate(new Date(showdata.rectDeadLine), 'yyyy-MM-dd')}}
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" >
                        <FormItem label="整改措施：" prop="rectMeasure">
                            {{showdata.rectMeasure}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="创建人：" prop="planStart">
                                    {{showdata.createUserName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="创建时间：" prop="planEnd">
                                    {{showdata.createDate}}
                                </FormItem>
                            </Col>
                        </Row>
            </Form>
            <div slot="footer">
                <Button  class='ivu-btn-save' @click="onCancel">关闭</Button>
            </div>
        </Modal>
        <Modal title="整改计划填写" :transfer=false v-model="model12" :width=800 >
            <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom" :label-width="100">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="审计任务：" >
                            {{form1datacopy.planTaskName}}
                        </FormItem>
                    </Col>
                    <Col span="11" >
                        <FormItem label="审计单位：">
                            {{form1datacopy.auditedOrgName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="审计专家：">
                             {{form1datacopy.auditorName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="审计时间：" >
                            {{this.formatDate(new Date(form1datacopy.auditTime), 'yyyy-MM-dd')}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="项目：">
                                {{form1datacopy.factorName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem label="审计内容：" >
                                {{form1datacopy.subitemName}}
                        </FormItem>
                    </Col>
                </Row>
                 <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="扣分：" prop="auditScore">
                            {{form1datacopy.auditScore}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="问题状态:">
                             {{form1datacopy.problemStateName}}
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" >
                        <FormItem label="问题描述：" prop="rpoblemDesc">
                            {{form1datacopy.rpoblemDesc}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem label="问题图片:">
                            <div v-if="upLoadList1.length > 0">
                                <div v-for="item in upLoadList1" :key='item.id'>
                                    <a @click="downloadFile(form1datacopy.problemId,item)"><span
                                            style="color: #3399ff;margin-left: 5px"> {{ item.fileName }}</span>
                                    </a>
                                    <a @click="remove1(form1datacopy.problemId, item.id)"><span
                                            style="color: #3399ff;margin-left: 5px">删除</span>
                                    </a>
                                </div>
                            </div>
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="detail-background-clor">
                    <Col span="11">
                        <FormItem label="整改实施人：" prop="executorId">
                            <cascaderDom ref="childUser1" @setOrgInfo="setUserId1" @setOrgname="setUserName1"
                                         :currentOrgId="form1datacopy.executorId"
                                         :currentOrgName="form1datacopy.executorName">
                            </cascaderDom>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="整改期限（天）：" prop="rectDeadLine">
                            <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择登陆时间"
                                        v-model="form1datacopy.rectDeadLine"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>

                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" >
                        <FormItem label="整改措施：" prop="rectMeasure">
                            <Input v-model="form1datacopy.rectMeasure" type="textarea" :rows="3"/>
                        </FormItem>
                    </Col>
                </Row>
                <!--
                <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="创建人：" prop="planStart">
                                    {{form1datacopy.createUserName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="创建时间：" prop="planEnd">
                                    {{form1datacopy.createDate}}
                                </FormItem>
                            </Col>
                        </Row>-->
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="submit('form1datacopy')" >确定</Button>
                <Button class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
            </div>
        </Modal>
      
        <Modal title="图片查看" v-model="visible">
                    <img :src="viewUrl" v-if="visible" style="width: 100%">
                    <div slot="footer">
                        <Button @click="visible=false"  class='ivu-btn-save'>关闭</Button>
                    </div>
        </Modal>
    </div>

</template>

<script>
    import {Api} from '@/api/index.js'
    import cascaderDom from '@/components/cascader-dom'
    import {sessionStorage} from '@/common/cacheUtils.js'
    export default {
        components: {
            cascaderDom
        },
        data() {
            const expectUserVal = (rule, value, callback) => {
                if(this.dataForm.expectUser !== null && this.dataForm.expectUser !== undefined ) {
                    callback();
                } else {
                    callback(new Error(' '));
                }
            };
            const assignUserIdVal = (rule, value, callback) => {
                if(this.dataForm.assignUserId !== null && this.dataForm.assignUserId !== undefined ) {
                    callback();
                } else {
                    callback(new Error(' '));
                }
            };

            return {
                switchFlag: false,
                model12: false,
                missonList:[],
                showdata: {},
                fileUrl: Api.interestedPartiesUserFile,
                upLoadList1: [],
                form1datacopy:{},
                missionSelectModal:false,
                form1: {},
                dataForm: {},
                chkProblem : {},
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '审计任务',
                        key: 'planTaskName',
                        align: 'center'
                    },
                    // {
                    //     minWidth: 180,
                    //     title: '审计单位',
                    //     key: 'auditedOrgName',
                    //     align: 'center'
                    // },
                    // {
                    //     minWidth: 100,
                    //     title: '审计专家',
                    //     key: 'auditorName',
                    //     align: 'center'
                    // },
                    // {
                    //     minWidth: 130,
                    //     title: '审计时间',
                    //     key: 'auditTime',
                    //     align: 'center',
                    //     render:(h,params)=>{
                    //         return h('div',[
                    //             (this.formatDate(new Date(params.row.auditTime), 'yyyy-MM-dd'))
                    //         ]);
                    //     }
                    // },
                    {
                        minWidth: 300,
                        title: '问题描述',
                        key: 'rpoblemDesc',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '项目',
                        key: 'factorName',
                        align: 'center',
                    },
                    // {
                    //     minWidth: 180,
                    //     title: '审计内容',
                    //     key: 'subitemName',
                    //     align: 'center',
                    // },
                    {
                        minWidth: 180,
                        title: '扣分',
                        key: 'auditScore',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '问题状态',
                        key: 'problemStateName',
                        align: 'center',
                    },	
                    {
                        minWidth: 250,
                        title: '问题图片',
                        align: 'center',
                        key: 'imgsrc',
                        render:  (h, params) => {
                            //console.log('pictureId=',params.row)
                            let ps  = params.row.pictureId.split(':')
                            let hFn = []
                            ps.forEach(v=>{
                                if(v){
                                    let url = this.fileUrl + '/file/' + v
                                    hFn.push(
                                        h('img', {
                                            style: {
                                                width: "30px",
                                                margin: "3px",
                                                cursor: "pointer"
                                            },
                                            attrs: {
                                                src: url
                                            },
                                            on: {
                                                click: () => {
                                                    this.handleView('',url)
                                                }
                                            }
                                        })
                                    )
                                }
                            })
                            return h('div', [...hFn
                            ]);
                        }
                    },
                    // {
                    //     minWidth: 180,
                    //     title: '问题描述',
                    //     key: 'rpoblemDesc',
                    //     align: 'center',
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('span', (params.row.rpoblemDesc && params.row.rpoblemDesc.length) < 10 ?
                    //                 params.row.rpoblemDesc : params.row.rpoblemDesc.substr(0, 9) + '...')
                    //         ]);
                    //     }
                    // },
                    // {
                    //     minWidth: 120,
                    //     title: '问题状态',
                    //     align: 'center',
                    //     key: 'problemStateName'
                       
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 180,
                        align: 'center',
                        render: (h, params) => {
                            let logUserId = sessionStorage('userId').getObject('userId').userId;

                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params,1);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.executorId===logUserId ? '' : '#d0d0d0',
                                        pointerEvents: params.row.executorId===logUserId ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params,2);
                                        }
                                    }
                                }, '填写计划')
                            ]);
                        }
                    }
                ],
                ruleCustom: {
                    executorId: [
                        {required: true, message: '  ', trigger: 'blur'}
                    ],
                },
                dataTable: [],
                model1: false,
                model11: false,
                buttonLoading:false,tableHeight: '',
                model3: false,
                viewForm: {},
                setCurrentExpectUserName : {},
                setCurrentAssignUserName : {},

                uploadList : [],
                uploadImgs : [],
                visible: false,
                viewUrl : Api.downloadPTWSchemeFile,
                upUrl:Api.uploadPTWFiles,
                editable : false,
            }
        },
        mounted: function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        
        methods: {
            setUserName1(data) {
                this.form1datacopy.executorName = data;
            },
            setUserId1(data) {
                this.form1datacopy.executorId = data[data.length - 1];
            },
            onCancel() {
                this.model3 = false
            },
            getFiles(id) {
                this.upLoadList1.length = 0
                let url = this.fileUrl + '/' + id + '/files/picture'
                let data = {field: 'adtProblems'}
                this.$http.get(url, {params: data}).then((res) => {
                    console.log('res.data.data=',res.data.data)
                    if (res.data.result == "success") {
                        if(res.data.data){
                            this.upLoadList1 = res.data.data
                            this.upLoadList1 = this.upLoadList1.map(v =>{
                                    v.url = this.fileUrl + '/file/' + v.id;
                                    return v
                                })
                            }
                    }
                })
            },
            handleRemove (file) {
                //删除操作
                let _this = this;
                let config = {
                    title: '系统提示',
                    content: '确认删除图片吗?',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: function () {

                        _this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });
                        _this.uploadImgs.splice(_this.uploadImgs.indexOf(file), 1);

                        _this.$http.delete(Api.downloadPTWSchemeFile  + '/' + file.id).then((res) => {
                            _this.$Message.success('删除成功');
                          /*  _this.uploadImgs = [];
                            _this.$http.get(_this.upUrl, {params: {}}).then((res) => {
                                if(res.data.data!=null){
                                    res.data.data.map((item)=>{
                                        _this.uploadImgs.push({ name : item.fileName, id : item.id , url : Api.downloadPTWSchemeFile + '/' + item.id});
                                    });
                                }
                            }).catch(e => {
                                console.log(e)
                                this.$Message.error("数据获取失败")
                            })*/

                            _this.$Spin.hide();
                        }).catch(e => {
                            _this.$Spin.hide();
                            _this.$Message.error('删除失败' + e);
                        })
                    },
                    onCancel: function () {
                    }
                }
                this.$Modal.confirm(config);
            },
            
            handleView (name,url) {
                console.log(111111,url)
                this.viewUrl = url;
                this.imgName = name;
                this.visible = true;
            },

            handleCancel() {
                this.model1 = false;
                this.model11 = false;
                this.model12 = false;

            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let userId = sessionStorage('userId').getObject('userId').userId;
                        let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
                        this.form1datacopy.createUserId = userId;
                        this.form1datacopy.createOrgId = orgId;
                        this.$http.post(Api.updateAdtProblem, this.form1datacopy).then((res) => {
                            if (res.status === 200) {
                                this.$Message.success('成功');
                                this.model12 = false;
                                this.query()

                            }else if (res.data.status === 201) {
                                this.$Message.error(res.data.msg);
                                this.model12 = false;
                            }

                        }).catch(e => {
                            this.model12 = false;
                            this.query();
                            this.$Message.error("数据获取失败")
                        })
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            query() {this.buttonLoading=true
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                }

                if(this.form1.rpoblemDesc){
                    data.rpoblemDesc=this.form1.rpoblemDesc
                }
                data.createOrgId = sessionStorage('userId').getObject('userId').companyId;
                
                let url = Api.queryAdtProblemPlan;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.totalSize;this.buttonLoading=false
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {};
                this.query();
            },

            deleteData(params) {
                let url = Api.deleteAdtProblem;
                
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.get(url,  {params: {id:params.row.problemId}}).then((res) => {
                            if (res.status === 200) {
                                this.$Message.success('成功');
                                this.query()
                            }else if (res.data.status === 201) {
                                this.$Message.error(res.data.msg);

                            }
                        }).catch(e => {
                            this.$Message.error('请求失败' + e);
                        })
                    },
                    cancelText: '取消'
                });
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
            remove1(mainId, id) {
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    var index = this.upLoadList1.indexOf(id); 
                    if (index > -1) { 
                        this.upLoadList1.splice(index, 1); 
                    } 
                    this.getFiles(mainId)
                })
            },
            showData(data, flag) {
                data.row.createDate =  this.formatDate(new Date(data.row.createDate), 'yyyy-MM-dd')
                this.getFiles(data.row.problemId)
                if (flag == 1) {
                    this.showdata = data.row;
                    this.model3 = true;
                } else {
                    this.form1datacopy = JSON.parse(JSON.stringify(data.row));
                    this.form1datacopy.auditTime =  this.formatDate(new Date(this.form1datacopy.auditTime), 'yyyy-MM-dd')
                    this.form1datacopy.rectDeadLine =  new Date()
                    this.model12 = true;
                }
            },
        },

        watch:{
            "model11":function(qw,er){
                if(qw && this.model11){
                    setTimeout(()=>{
                        //this.$refs.childUser.setCurrentOrg();
                    },100)
                }else{
                    //this.$refs.childUser.setCurrentUser();
                }
            },
        },
        
    }
</script>
<style lang='css' scoped>
    @import '../../../index.css';
</style>
